import React, { useState, useEffect } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import {
  Modal,
  Descriptions,
} from 'antd';
import { DetailInfoItem } from '../data';


interface SettingDetailProps {
  dispatch: Dispatch;
  detailInfo: DetailInfoItem;
  settingVisible: boolean;
}

const SettingDetailElem: React.FC<SettingDetailProps> = (props) => {
  const {
    dispatch,
    detailInfo,
    settingVisible,
  } = props;

  return (
    <Modal
      title="配置(用于寄存的格口比例)"
      visible={settingVisible}
      width={800}
      footer={null}
      onCancel={
        () => dispatch({ type: 'cabinetManagementDetail/changeSettingModal', payload: false })
      }
    >
      <Descriptions>
        <Descriptions.Item label="超大箱">Zhou Maomao</Descriptions.Item>
        <Descriptions.Item label="超大箱(宽)">1810000000</Descriptions.Item>
        <Descriptions.Item label="大箱">Hangzhou, Zhejiang</Descriptions.Item>
        <Descriptions.Item label="大箱(宽)">empty</Descriptions.Item>
        <Descriptions.Item label="中箱">Zhou Maomao</Descriptions.Item>
        <Descriptions.Item label="中箱(宽)">1810000000</Descriptions.Item>
        <Descriptions.Item label="小箱">Hangzhou, Zhejiang</Descriptions.Item>
        <Descriptions.Item label="小箱(宽)">empty</Descriptions.Item>
        <Descriptions.Item label="超小箱">Zhou Maomao</Descriptions.Item>
        <Descriptions.Item label="超小箱(宽)">1810000000</Descriptions.Item>
        <Descriptions.Item label="文件箱">Hangzhou, Zhejiang</Descriptions.Item>
        <Descriptions.Item label="文件箱(宽)">1810000000</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default connect(({
  cabinetManagementDetail: { detailInfo, settingVisible },
}: any) => ({ detailInfo, settingVisible }))(SettingDetailElem);
